<template>
  <div class="print_box">
    <div class="print_tk_box">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <div class="print_btn">
        <a-button v-print="printTest" type="primary" @change="tablechange" @click="tableheig">打印</a-button>
        <!-- <a-button v-print="printTest_two"  v-if="print_key==2?true:false" type="primary">打印</a-button> -->
        <!-- <a-button v-print="printTest_three"  v-if="print_key==3?true:false" type="primary">打印</a-button> -->
        <a-button type="button" @click="getpdf($parent.print_data.GYSDWMC+'-销售单'+print_key)">PDF下载</a-button>
      </div>

      <a-tabs :default-active-key="1" @change="callback">
        <a-tab-pane :key="1" tab="模板一"></a-tab-pane>
        <a-tab-pane :key="2" tab="模板二"></a-tab-pane>
        <a-tab-pane :key="3" tab="模板三"></a-tab-pane>
      </a-tabs>

      <div class="print_tk print_tk_one" v-if="print_key==1?true:false" id="printTest">
        <div class="print_top">
          <ul class="ul_one">
            <li>
              <h1 class="hed_tit">{{$parent.print_data.GYSDWMC}}</h1>
            </li>
          </ul>
        </div>
        <div class="table">
          <h1 class="bjd_tit">销售单</h1>
          <div class="hed_p">
            <span>单据编号：{{$parent.print_data.SQDHDH}}</span>
            <span>日期：{{$parent.print_data.ZDRQ}}</span>
            <span>第1页</span>
          </div>
          <div class="xsd_info">
            <ul>
              <li>
                <span class="tit">购货单位：</span>
                <span>{{$parent.print_data.dhdwmc}}</span>
              </li>
              <li>
                <span class="tit">联系电话：</span>
                <span>{{$parent.print_data.dhrPHONE}}</span>
              </li>
              <li>
                <span class="tit">单位地址：</span>
                <span>{{$parent.print_data.FHDZ}}</span>
              </li>
              <li>
                <span class="tit">联&nbsp;系&nbsp;人：</span>
                <span>{{$parent.print_data.DHR}}</span>
              </li>
            </ul>
          </div>
          <table border="1">
            <thead>
              <tr>
                <th style="width:100px;">序号</th>
                <th class="xh">型号规格</th>
                <th>品牌</th>
                <th>单位</th>
                <th>库房</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.child" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.XL}}</td>
                <td>{{item.SCCJC}}</td>
                <td>{{item.JLDW}}</td>
                <td>{{item.kfmc}}</td>

                <td>{{item.DHSL}}</td>
                <td>{{item.HSJ}}</td>
                <td>{{item.DHSL*item.HSJ}}</td>
              </tr>

              <tr>
                <td>本页小计</td>
                <td colspan="4"></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <td>总计（大写）</td>
                <td colspan="7">
                  <div class="money_td">
                    <p>
                      整
                      <span>无</span>
                    </p>
                    <p class="money">
                      ￥
                      <span class="td_money_span">{{$parent.print_data.zje}}</span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                <td colspan="5">收款方式：{{$parent.print_data.SKFS}}</td>
                <td>总计数量</td>
                <td>{{$parent.print_data.DHSL}}</td>
              </tr>
            </tbody>
          </table>
          <div class="table_fot">
            <div class="left_info">
              <p>
                <span>联系电话：{{$parent.print_data.GYSPHONE}}</span>
                <!-- <span>传真：无</span> -->
              </p>
              <p>地 址：{{$parent.print_data.FHDZ}}</p>
            </div>
            <div class="rig_Sign_a_contract">
            
              <div class="rig_Seal">
                <span class="ghr">购货单位及购货人</span>
                <span class="gz">（签字/盖章）</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="becareful">
          <ul>
          </ul>
        </div>-->
      </div>
      <div class="print_tk print_tk_two" v-if="print_key==2?true:false" id="printTest">
        <div class="print_top">
          <ul class="ul_one">
            <li>
              <h1 class="hed_tit">{{$parent.print_data.GYSDWMC}}</h1>
            </li>
          </ul>
        </div>
        <div class="table">
          <h1 class="bjd_tit">销售单</h1>
          <div class="hed_p">
            <span>单据编号：{{$parent.print_data.SQDHDH}}</span>
            <span>日期：{{$parent.print_data.ZDRQ}}</span>
            <span>税率：{{$parent.print_data.FPSL}}%</span>
            <span>第1页</span>
          </div>
          <div class="xsd_info">
            <ul>
              <li>
                <span class="tit">购货单位：</span>
                <span>{{$parent.print_data.dhdwmc}}</span>
              </li>
              <li>
                <span class="tit">联系电话：</span>
                <span>{{$parent.print_data.dhrPHONE}}</span>
              </li>
              <li>
                <span class="tit">单位地址：</span>
                <span>{{$parent.print_data.FHDZ}}</span>
              </li>
              <li>
                <span class="tit">联&nbsp;系&nbsp;人：</span>
                <span>{{$parent.print_data.DHR}}</span>
              </li>
            </ul>
          </div>
          <table border="1">
            <thead>
              <tr>
                <th style="width:100px;">序号</th>
                <th class="xh">型号规格</th>
                <th>单位</th>
                <th>品牌</th>
                <th>库房</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.child" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.XL}}</td>
                <td>{{item.JLDW}}</td>
                <td>{{item.SCCJC}}</td>
                <td>{{item.kfmc}}</td>
                <td>{{item.DHSL}}</td>
              </tr>

              <tr>
                <td>本页小计</td>
                <td colspan="4"></td>
                <td>{{$parent.print_data.zje}}</td>
              </tr>
              <tr>
                <td>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                <td colspan="3">收款方式：{{$parent.print_data.SKFS}}</td>
                <td>总计数量</td>
                <td>{{$parent.print_data.DHSL}}</td>
              </tr>
            </tbody>
          </table>
          <div class="table_fot">
            <div class="left_info">
              <p>
                <span>联系电话：{{$parent.print_data.GYSPHONE}}</span>
                <!-- <span>传真：无</span> -->
              </p>
              <p>地 址：{{$parent.print_data.FHDZ}}</p>
            </div>
            <div class="rig_Sign_a_contract">
           
              <div class="rig_Seal">
                <span class="ghr">购货单位及购货人</span>
                <span class="gz">（签字/盖章）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="print_tk print_tk_three" v-if="print_key==3?true:false" id="printTest">
        <div class="print_top">
          <ul class="ul_one">
            <li>
              <h1 class="hed_tit">{{$parent.print_data.GYSDWMC}}</h1>
            </li>
          </ul>
        </div>
        <div class="table">
          <h1 class="bjd_tit">销售单</h1>
          <div class="hed_p">
            <span>单据编号：{{$parent.print_data.SQDHDH}}</span>
            <span>日期：{{$parent.print_data.ZDRQ}}</span>
            <span>税率：{{$parent.print_data.FPSL}}%</span>
            <span>第1页</span>
          </div>
          <div class="xsd_info">
            <ul>
              <li>
                <span class="tit">购货单位：</span>
                <span>{{$parent.print_data.dhdwmc}}</span>
              </li>
              <li>
                <span class="tit">联系电话：</span>
                <span>{{$parent.print_data.dhrPHONE}}</span>
              </li>
              <li>
                <span class="tit">单位地址：</span>
                <span>{{$parent.print_data.FHDZ}}</span>
              </li>
              <li>
                <span class="tit">联&nbsp;系&nbsp;人：</span>
                <span>{{$parent.print_data.DHR}}</span>
              </li>
            </ul>
          </div>
          <table border="1">
            <thead>
              <tr>
                <th style="width:100px;">序号</th>
                <th class="xh">型号规格</th>
                <th>单位</th>
                <th>品牌</th>
                <th>库房与货位</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.child" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.XL}}</td>
                <td>{{item.JLDW}}</td>
                <td>{{item.SCCJC}}</td>
                <td>{{item.kfmc}}</td>
                <td>{{item.DHSL}}</td>
              </tr>

              <tr>
                <td>本页小计</td>
                <td colspan="4"></td>
                <td>{{$parent.print_data.zje}}</td>
              </tr>
              <tr>
                <td>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
                <td colspan="3">收款方式：{{$parent.print_data.SKFS}}</td>
                <td>总计数量</td>
                <td>{{$parent.print_data.DHSL}}</td>
              </tr>
            </tbody>
          </table>
          <div class="table_fot">
            <div class="left_info">
              <p>
                <span>联系电话：{{$parent.print_data.GYSPHONE}}</span>
                <!-- <span>传真：无</span> -->
              </p>
              <p>地 址：{{$parent.print_data.FHDZ}}</p>
            </div>
            <div class="rig_Sign_a_contract">
           
              <div class="rig_Seal">
                <span class="ghr">购货单位及购货人</span>
                <span class="gz">（签字/盖章）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {
      printTest: {
        id: "#printTest",
        popTitle: " ",
        extraCss: "",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },
      print_key: 1,
      print_list: "",
      imageurl: ""
    };
  },

  methods: {
    callback(key) {
      console.log(key);
      this.print_key = key;
    },
    close() {
      this.$parent.print_flag = false;
    },
    tablechange(e) {
      console.log(e);
    },
    tableheig() {},
    //title:下载的名称
    getpdf(title) {
      //  let url =  'https://yb.bearing.cn/images/circle/'+this.1+'.png'
      // 	this.getBase64Image(url)

      var pdfelement = document.getElementById("printTest");
      // var pdfelement = $("#printTest");
      // 导出之前先将滚动条置顶,不然会出现数据不全的现象
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // console.log(pdfelement);
      // let pageData = new Image();
      // pageData.setAttribute("crossOrigin", "Anonymous");
      // setTimeout(() => {
      html2Canvas(pdfelement).then(function(canvas) {
        console.log(canvas);
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        console.log(leftHeight);
        //页面偏移
        var position = -100;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 580.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = new Image();
        //设置图片跨域访问
        pageData.setAttribute("crossOrigin", "Anonymous");

        setTimeout(() => {
          pageData = canvas.toDataURL("image/jpeg", 1.0);
          // pageData.setAttribute("crossOrigin", "Anonymous");
          var pdf = new JsPDF("", "pt", "a4");
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save(title + ".pdf");
        }, 1000);
      });
      // }, 1000);
    },
    getBase64Image(url, ref) {
      var _this = this;
      var image = new Image();
      image.src = url + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = () => {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        let dataurl = canvas.toDataURL("image/jpeg", quality);
        this.imageurl = dataurl;
        console.log(this.imageurl);
      };
    }
  },

  created() {
    //  let url =  'https://yb.bearing.cn/images/circle/'+this.1+'.png'
    //调用图片转换base64的方法
    // this.getBase64Image(url)

    // this.print_list=this.$parent.print_data
    console.log(this.print_list);
  }
};
</script>


<style lang='less' scoped>
// @media print {
//   @import url("./print.css");
// }
.print_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.print_box .print_tk_box {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  background: #fff;
  padding: 20px;
}

.hed_tit {
  text-align: center;
}
.print_top {
  width: 95%;
  margin: 0 auto;
}
.print_top ul li {
  display: inline-block !important;
  width: 49%;
  text-align: left;
  margin: 2px 0;
  color: #000;
}

.tit_li {
  display: inline-block;
  width: 65px;
  text-align: left;
  color: #000;
}

.print_tk table {
  border-color: #000 !important;
}

.print_tk th,
.print_tk td {
  border-color: #000 !important;
  font-weight: normal;
}

.print_tk tr {
  border-color: #000 !important;
}

.print_tk .footer {
  display: flex;
}

.close {
  cursor: pointer;
  z-index: 999;
}
.print_tk .ant-table-footer {
  padding: 0 !important;
}
.print_btn {
  position: absolute;
  right: 28px;
  top: 85px;
  z-index: 999;
  button {
    margin: 0 10px;
  }
}
@media (max-width: 1600px) {
  .print_tk_box {
    overflow-y: scroll;
    height: 70%;
  }
}
.print_tk {
  // width: 95%;
  // margin: 10px auto;
  .hed_tit {
    font-size: 20px;
    text-align: left;
    font-style: italic;
    font-weight: normal;
    text-decoration: underline;
    margin-bottom: 10px;
    color: #000;
    // font-family: "楷体";
  }
  .tit_li {
    display: inline-block;
    width: 73px;
    text-align: left;
    color: #000;
  }
  .ul_one {
    width: 100%;
    display: inline-block;
    li {
      width: 100%;
    }
  }
  .table {
    width: 95%;
    margin: 10px auto;
    // overflow-y: scroll;
    //     height: 300px;

    .bjd_tit {
      text-align: center;
      letter-spacing: 30px;
      font-weight: bold;
      // font-family: "楷体";
      font-size: 20px;
    }
    .table_tit {
      text-align: left;
      margin: 0;
      color: #000;
      padding-left: 10px;
    }
    .hed_p {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid #000;
      color: #000;
    }
    .xsd_info {
      padding: 0 10px;
      color: #000;

      ul {
        li {
          display: inline-block;
          width: 50%;
          text-align: left;
          margin: 2px 0 5px 0;
          .tit {
            display: inline-block;
            width: 72px;
            text-align: left;
          }
        }
      }
    }
    table {
      width: 100%;

      thead {
        tr {
          th {
            padding: 5px 0;
            text-align: center;
            color: #000;
          }
          .xh {
            width: 30%;
          }
        }
      }
      tbody {
        // overflow-y: scroll;
        // height: 200px;
        tr {
          td {
            padding: 3px 0 !important;
            text-align: center;
            color: #000;
          }
          .money_td {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            p {
              margin: 0;
            }
            .money {
              width: 30%;
              .td_money_span {
                display: inline-block;
                border-bottom: 1px solid #000;
                width: 100px;
              }
            }
          }
        }
      }
    }
    .table_fot {
      display: flex;
      justify-content: space-between;
      text-align: left;
      color: #000;
      // margin-top: 20px;
      line-height: 30px;
      .left_info {
        width: 55%;
        p {
          margin: 0;
        }
      }
      .rig_Sign_a_contract {
        width: 45%;
        display: flex;
        .person_in_charge {
          width: 40%;
          p {
            margin: 0;
          }
        }
        .rig_Seal {
          width: 60%;
          .ghr {
            display: inline-block;
            width: 35%;
          }
          .gz {
            display: inline-block;
            width: 65%;
          }
        }
      }
    }
  }

  .footer {
    .left_num_tit {
      width: 12%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .left_num {
      width: 36.4%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .num_td {
      width: 11%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsdj_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsje_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bz_td {
      width: 11%;
      /* border-right: 1px solid #000; */
      padding: 10px;
    }
  }

  .ant-table.ant-table-bordered .ant-table-footer {
    border-color: #000;
    border-top: 0;
    border-radius: 0;
  }

  .ant-table-footer::before {
    top: 0 !important;
    height: 0px !important;
  }
  .ant-table-thead > tr > th {
    padding: 5px 16px !important;
  }
  .ant-table-tbody > tr > td {
    padding: 8px 16px !important;
  }
  // .becareful {
  //   text-align: left;
  //   padding: 20px 0;
  //   width: 95%;
  //   margin: 0 auto;

  //   ul {
  //     li {
  //       p {
  //         margin: 0;
  //         margin: 5px 0;
  //         color: #000;
  //       }
  //     }
  //     .becareful_fot {
  //       width: 80%;
  //       display: flex;
  //       justify-content: space-between;
  //       align-items: center;
  //       margin: 30px auto;
  //       padding-right: 100px;
  //       .qz_box {
  //         position: relative;
  //         img {
  //           position: absolute;
  //           right: -104px;
  //           top: -60px;
  //           width: 100px;
  //           height: 100px;
  //           border-radius: 100px;
  //         }
  //       }
  //     }
  //   }
  // }
}

.print_tk_one {
}
// .print_tk_three {
//   .table {
//     table {
//       width: 100%;
//       thead {
//         tr {
//           th {
//             padding: 5px 0;
//             text-align: center;
//             color: #000;
//           }
//           .xh {
//             width: 30%;
//           }
//         }
//       }
//       tbody {
//         tr {
//           border-bottom: 1px solid #000;
//           td {
//             padding: 8px 0;
//             text-align: center;
//             color: #000;
//           }
//         }
//       }
//     }
//   }
// }
</style>
